import React, { useState, useCallback,useEffect } from 'react'
import { Cell, Input, Button, Checkbox, Toast } from 'zarm'
import CustomIcon from '@/components/CustomIcon';
import Captcha from 'react-captcha-code';
import { post } from '@/utils'


import s from './style.module.less'

const Login = () => {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [verify, setVerify] = useState('');
    const [captcha, setCaptcha] = useState('');
    const [type, setType] = useState('login');

    useEffect(()=>{
        document.title=type=='login'?'登录':'注册'
    },[type])

    const handlechange = useCallback((captcha) => {
        // console.log(captcha);
        setCaptcha(captcha);
    }, [])

    // 登录注册
    const onsubmit = async () => {
        if (!username) {
            Toast.show('请输入账号');
            return;
        }
        if (!password) {
            Toast.show('请输入密码');
            return;
        }

        // 发请求

        try {
           if(type=='login'){
            const data=await post('/api/user/login',{
                username,
                password
            })
            console.log(data,"123");
            Toast.show(data.msg);
            localStorage.setItem('token',data.data.token);
            window.location.href='/';
           }
        else{
            if (!verify) {
                Toast.show('请输入验证码');
                return;
            }
            if (verify != captcha) {
                Toast.show('验证码错误');
                return;
            }
            const data = await post('/api/user/register', {
                username,
                password
            })
            console.log(data);
            Toast.show(data.msg);
           }
        }
        catch (err) {
            console.log(err);
        }

    }

    return (<div className={s.auth}>
        <div className={s.head} />
        <div className={s.tab}>
            <span className={type == 'login'?s.avtive:''} onClick={() => setType('login')}>登录</span>
            <span className={type == 'register'?s.avtive:''} onClick={() => setType('register')}>注册</span>
        </div>
        <div className={s.form}>
            <Cell icon={<CustomIcon type="zhanghao" />}>
                <Input
                    clearable
                    type="text"
                    placeholder="请输入账号"
                    onChange={(value) => setUsername(value)}
                />
            </Cell>
            <Cell icon={<CustomIcon type="mima" />}>
                <Input
                    clearable
                    type="password"
                    placeholder="请输入密码"
                    onChange={(value) => setPassword(value)}
                />
            </Cell>
            {type=='register'?<Cell icon={<CustomIcon type="mima" />}>
                <Input
                    clearable
                    type="text"
                    placeholder="请输入验证码"
                    onChange={(value) => setVerify(value)}
                />
                <Captcha charNum={4} onChange={handlechange}></Captcha>
            </Cell>:null}
        </div>
        {type=='register'?
        <div className={s.operation}>
            <div className={s.agree}>
                <Checkbox />
                <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
            </div>
            <Button block theme="primary" onClick={onsubmit}>注册</Button>
        </div>:
        <div className={s.operation}>
            <Button block theme="primary" onClick={onsubmit}>登录</Button>
        </div>
        }
    </div>)
}

export default Login;
